<template>
  <div class="personItem">
    <ul class="textUl">
      <li>
        <h3>企业名称：</h3>
        <div class="inputDiv">
          <input type="text" placeholder="请输入企业名称" v-model="name">
        </div>
      </li>
      <li>
        <h3>联系方式：</h3>
        <div class="inputDiv">
          <input type="number" placeholder="请输入您的联系方式" v-model="phone" pattern="[0-9]*">
        </div>
      </li>
      <li>
        <h3>商品类别：</h3>
        <div class="inputDiv">
          <input type="text"  disabled="disabled" value="不限类别">
        </div>
      </li>
    </ul>
    <div class="imgInfoDiv">
      <h3>商品图片信息（必须上传、可多张）</h3>
      <div class="uploadImgDiv">
        <div class="imgItemDiv">
          <img class="loadImg" v-for="(src,index) in comurls1" :key="index" :src="src">
          <div class="imgClick" @click="uploadImg(1)"><img src="/static/images/user/upload4.png"></div>
        </div>
        <div class="imgItemDiv">
          <img class="loadImg" v-for="(src,index) in comurls2" :key="index" :src="src">
          <div class="imgClick" @click="uploadImg(2)"><img src="/static/images/user/upload3.png"></div>
        </div>
      </div>
      <p class="remindP">图片信息必须清晰可见，尺寸统一为宽750高度不限</p>
    </div>
    <div class="imgInfoDiv">
      <h3>故事图片信息（选择性上传）</h3>
      <div class="uploadImgDiv">
        <div class="imgItemDiv">
          <img class="loadImg" v-for="(src,index) in comurls3" :key="index" :src="src">
          <div class="imgClick" @click="uploadImg(3)"><img src="/static/images/user/upload2.png"></div>
        </div>
        <div class="imgItemDiv">
          <img class="loadImg" v-for="(src,index) in comurls4" :key="index" :src="src">
          <div class="imgClick" @click="uploadImg(4)"><img src="/static/images/user/upload5.png"></div>
        </div>
      </div>
      <p class="remindP">图片信息必须清晰可见，尺寸统一为宽750高度不限</p>
    </div>
    <div class="btn" @click="submitInfo">提交审核</div>
  </div> 
</template>
<script>
import {mapGetters} from 'vuex'
export default {
    props:{
      orderShopItem:{
        type: Object
      }
    },
    data(){
      return{
        name: '',
        phone: '',
        urls1: [],//保存图片的路径
        urls2: [],//保存图片的路径
        urls3: [],//保存图片的路径
        urls4: [],//保存图片的路径
      }
    },
    computed:{
      comurls1(){
        return this.urls1
      },
      comurls2(){
        return this.urls2
      },
      comurls3(){
        return this.urls3
      },
      comurls4(){
        return this.urls4
      },
    },
    methods:{
      uploadImg(type){
        if(type === 1){//上传商品图片
          this.uploadType(this.urls1)
        }else if(type === 2){//上传商品卖点图片
          this.uploadType(this.urls2)
        }else if(type === 3){//上传故事图片
          this.uploadType(this.urls3)
        }
      },
      uploadType(dom){
        let that = this
        wx.chooseImage({
          count:  3,//最多上传的张数
          sizeType: ['original', 'compressed'],//可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], //可以指定来源是相册还是相机，默认二者都有
          success (res) {
            res.tempFilePaths.forEach(v=>{
              dom.push(v);
            });
          }
        })
      },
      checkInfo() {
      if (this.name.trim() === '' || this.name.trim() === undefined) {
        this.wxAlert('请输入企业名称')
        return false
      }
      if (this.phone.trim() === '' || this.phone.trim() === undefined || !this.phone.trim().match(/^1[0-9]{10}$/)) {
        this.wxAlert('请正确输入您的联系方式')
        return false
      }
      if (this.comurls1.length === 0 ){
        this.wxAlert('请上传商品图片')
        return false
      }
      if (this.comurls2.length === 0 ){
        this.wxAlert('请上传商品卖点图片')
        return false
      }
      return true
    },
    submitInfo(){
      if (!this.checkInfo()) {
        return
      }
      this.wxAlert('该功能尚未开放')
    },
    wxAlert(txt){
      wx.showToast({
          title: txt,
          icon: "none",
          duration: 2000,
          mask: true
      })
    }
  },
}
</script>
<style scoped>
.personItem{
  overflow: hidden;
  padding-bottom: 110rpx;
}
.textUl{
  padding: 0 30rpx;
}
.textUl li{
  height: 90rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #efeff4;
  display: flex;
  align-items: center;
  font-size: 30rpx;
  color: #2a2a2a;
}
.textUl li .inputDiv{
  flex: 1;
}
.textUl li .inputDiv input{
  padding: 0 10rpx;
}
.imgInfoDiv{
  padding: 0 30rpx;
}
.imgInfoDiv h3{
  font-size: 30rpx;
  color: #2a2a2a;
  height: 90rpx;
  line-height: 90rpx;
}
.imgInfoDiv .uploadImgDiv .imgItemDiv {
  overflow: hidden;
}
.imgInfoDiv .uploadImgDiv .imgItemDiv .loadImg{
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  float: left;
}
.imgInfoDiv .uploadImgDiv .imgItemDiv .imgClick{
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  float: left;
}
.imgInfoDiv .uploadImgDiv .imgItemDiv .imgClick img{
  width: 100%;
  height: 100%;
  display: block;
}
.imgInfoDiv .remindP{
  font-size: 24rpx;
  color: #c3c3c3;
  margin-top: -10rpx;
}
.btn{
  width: 100%;
  height: 100rpx;
  background: #e1c7d2;
  font-size: 36rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
}
</style>


